import React from 'react';
import { Menu } from 'antd';
import { BarChartOutlined, MedicineBoxOutlined, FileTextOutlined, UserOutlined, ContactsOutlined, NotificationOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const SideMenu = () => {
  const navigate = useNavigate();

  const handleMenuClick = ({ key }: { key: string }) => {
    switch (key) {
      case '1':
        navigate('/');
        break;
      case '2':
        // 修改: 将'/medicine'更正为'/medicines'以匹配App.tsx和实际路由配置
        navigate('/medicines');
        break;
      case '3':
        navigate('/sales');
        break;
      case '4':
        navigate('/customer');
        break;
      // 添加系统设置菜单点击事件
      case '5':
        navigate('/settings');
        break;
      // 新增菜单项导航
      case '6':
        navigate('/inventory');
        break;
      case '7':
        navigate('/reports');
        break;
      case '8':
        navigate('/contacts');
        break;
      case '9':
        navigate('/notifications');
        break;
      case '10':
        navigate('/visitors');
        break;
      default:
        break;
    }
  };

  return (
    <Menu 
      theme="dark" 
      defaultSelectedKeys={['1']} 
      mode="inline" 
      onClick={handleMenuClick}
    >
      <Menu.Item key="1" icon={<BarChartOutlined />}>
        概述
      </Menu.Item>
      <Menu.Item key="6" icon={<MedicineBoxOutlined />}>
        库存
      </Menu.Item>
      <Menu.Item key="7" icon={<FileTextOutlined />}>
        报告
      </Menu.Item>
      <Menu.Item key="5" icon={<UserOutlined />}>
        配置
      </Menu.Item>
      <Menu.Item key="4" icon={<ContactsOutlined />}>
        联系人管理
      </Menu.Item>
      <Menu.Item key="8" icon={<NotificationOutlined />}>
        通知
      </Menu.Item>
      <Menu.Item key="9" icon={<UserOutlined />}>
        与访客联系
      </Menu.Item>
    </Menu>
  );
};

export default SideMenu;